<template>
  <div>
    <!-- 图表显示区域 -->
    <div id="collectionEchar" style="height: 400px;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import * as HomeAPI from '@/api/home.js';
  export default {
    data() {
      return {

      }
    },
    created() {},
    mounted() {
      this.getcollectionEchar();
    },
    methods: {
      getcollectionEchar() {
        let myChart = echarts.init(document.getElementById('collectionEchar'));
        let option = {
          title: {
            text: "2021年月度收藏统计",
            left: "center",
            top: '5%',
          },
          tooltip: {
            trigger: "item",
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            orient: "vertical",
            left: "left",
            top:'15%',
            data: ['角色扮演', '休闲益智', '经营策略', '体育竞速', '动作射击']
          },
          series: [{
            name: "收藏",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [{
                value: 420,
                name: "角色扮演"
              },
              {
                value: 350,
                name: "休闲益智"
              },
              {
                value: 400,
                name: "经营策略"
              },
              {
                value: 320,
                name: "体育竞速"
              },
              {
                value: 450,
                name: "动作射击"
              }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c}'
                },
                labelLine: {
                  show: true
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        option && myChart.setOption(option);
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      }
    }
  }
</script>

<style>
</style>
